<template>
  <div>
    <div class="headerTitle">管理员列表</div>
    <div style="margin-top: 15px;">
      <el-form :inline="true" :model="user" class="demo-form-inline" size="small">
        <el-form-item label="姓名">
          <el-input v-model="user.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="user.account" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="user.sex" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="禁用">
          <el-select v-model="user.forbid" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="account" label="账号">
      </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          <span>{{scope.row.sex==0?"男":"女"}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="联系方式">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleDelete(scope.$index,scope.row.id)"
            type="danger"
          >
            删除
          </el-button>
          <el-button
            size="mini"
            @click="handleDelete(scope.$index,scope.row.id)"
            type="primary"
            if="scope.row.is_forbid"
          >
            启用
          </el-button>
          <el-button
            size="mini"
            @click="handleDelete(scope.$index,scope.row.id)"
            type="danger"
            if="scope.row.is_forbid"
          >
            停用
          </el-button>
          <el-button
            size="mini"
            @click="handleEdit(scope.$index,scope.row.id)"
            type="primary"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  //导入组件
  import mContent from '../components/mcontent.vue';
  import headBar from '../components/head-bar.vue';
  import footBar from '../components/foot-bar.vue';
  import {Select, Option} from 'element-ui';
  import Vue from 'vue';

  Vue.use(Select);
  Vue.use(Option);

  export default {
    components: {
      mContent, headBar, footBar
    },
    data() {
      const item = {
        id: '0001',
        name: '陈佰琳',
        account: 'cbl',
        sex: '0',
        phone: '13727573116',
        address: '广东省英德市',
        is_forbid: '1'
      };
      return {
        tableData: Array(15).fill(item),
        username: '',
        user: {
          name: '',
          sex: '',
          account: '',
          forbid: ''
        },
      }
    },
    methods: {
      handleSearch: function () {

      },
      handleDelete: function (index, id) {
        console.log(index);
        console.log(id);
      },
      handleEdit: function (index, id) {
        console.log(index);
        console.log(id);
      }
    }
  }
</script>
<style scoped>
  .foot {
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  .headerTitle {
    font-size: 18px;
    color: #000;
  }
</style>
